<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" id="iphone-viewport" content="minimum-scale=1.0, maximum-scale=1.0, width=device-width" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <style type="text/css">
  body {
    width: 100%;
    background-image: url(mage-gnome01-large.jpg);
    background-position: inherit;
  }
  
  ul,
  li,
  div {
    margin: 0px;
    padding: 0px;
  }
  </style>
  <link rel="stylesheet" type="text/css" href="css/UIPickerView.css">
  <script type="text/javascript" src="js/UIPickerView/UIPickerView.js"></script>
  <script type="text/javascript" src="js/UIPickerView/CAAnimation.js"></script>
  <script type="text/javascript" src="js/jquery-2.0.2.js"></script>
</head>

<body>
  <button id="create-picker">create picker</button>
  <button id="open-picker">open picker</button>
  <button id="close-picker">close picker</button>
  <button id="select-picker">select picker</button>
  <button id="render-picker">render picker</button>
  <div class="region-picker-wrapper visibility-control" id="region-picker">
    <div class="header">
      <div class="bar bar-header">
        <button class="button button-clear" id="selectClose">取消</button>
        <div class="h3 title">选择</div>
        <button class="button button-clear button-positive" id="selectYes">确认</button>
      </div>
    </div>
    <div class="body">
      <div class="select-zone top"></div>
      <div class="select-zone middle"></div>
      <div class="select-zone bottom"></div>
      <div class="region-picker">
      	<input type="hidden" value="provincePicker">
        <div id="provincePicker"></div>
      </div>
      <div class="region-picker">
      	<input type="hidden" value="cityPicker">
        <div id="cityPicker"></div>
      </div>
      <div class="region-picker">
      	<input type="hidden" value="areaPicker">
        <div id="areaPicker"></div>
      </div>
    </div>
  </div>
  <script type="text/javascript">
  var pickerCreate = document.getElementById('create-picker');
  var pickerOpen = document.getElementById('open-picker');
  var pickerClose = document.getElementById('close-picker');
  var pickerSelect = document.getElementById('select-picker');
  var pickerRender = document.getElementById('render-picker');
  var up, up1, up2,up3, animaed;
  var up1Data;
  var up2Data;
  var up3Data;
  var selectYes = document.getElementById('selectYes');
  var selectClose = document.getElementById('selectClose');
  var data = [];
  $.ajax({
	  	type:"get",
		url:"/address/selectAllRegion",
		dataType:"JSON",
		async: true,
		success:function(data1){
			data=data1.data;
			up1Data=data;
			up2Data=data[0].city;
			up3Data=up2Data[0].area;
		  selectYes.addEventListener('click', function() {
		    animaed.finish();
		    var address='';
		    var regionCodes='';
		    console.log($(".selected"))
		    $(".selected").each(function(i,item){
		    	console.log(item)
		    	address+=item.innerText;
		    	regionCodes+=item.attributes.regioncode.nodeValue+',';
		    })
		    console.log(address);
		    console.log(regionCodes);
		
		    //if up1Data or up2Data is empty ,so use UPSelectRowIndexPath and UPThen
		
		    if (!up1Data && up) {
		      up.UPSelectRowIndexPath(1).UPThen(function(indexPath, value) {
		        console.log(value);
		      })
		    };
  })

  selectClose.addEventListener('click', function() {
    animaed.finish();
  })

  pickerCreate.addEventListener('click', function() {
    up = UIPickerView.createPickerView({
      dataSource: data,
      id: 'provincePicker',
      constraintsId: 'wower',
      kUP: {
        kUPCELLHEIGHT: 26,
        kUPFRICTION: 0.003
      },
      valueChange: function(data) {
    	console.log(data);
        up2Data = data.city;
        up3Data=data.city[0].area;
        up1 = UIPickerView.createPickerView({
            dataSource: up2Data,
            id: 'cityPicker',
            constraintsId: 'wower1',
            kUP: {
              kUPCELLHEIGHT: 26,
              kUPFRICTION: 0.003
            },
            valueChange: function(data) {
              console.log(data);
              up3Data = data.area;
	            up2 = UIPickerView.createPickerView({
	                dataSource: up3Data,
	                id: 'areaPicker',
	                constraintsId: 'wower2',
	                kUP: {
	                  kUPCELLHEIGHT: 26,
	                  kUPFRICTION: 0.003
	                },
	                valueChange: function(data) {
	                  console.log(data);
	                  up3Data = data;
	                }
	              });
            }
          });
        up2 = UIPickerView.createPickerView({
            dataSource: up3Data,
            id: 'areaPicker',
            constraintsId: 'wower2',
            kUP: {
              kUPCELLHEIGHT: 26,
              kUPFRICTION: 0.003
            },
            valueChange: function(data) {
              console.log(data);
              up3Data = data;
            }
          });
      }
    });
    up1 = UIPickerView.createPickerView({
        dataSource: up2Data,
        id: 'cityPicker',
        constraintsId: 'wower1',
        kUP: {
          kUPCELLHEIGHT: 26,
          kUPFRICTION: 0.003
        },
        valueChange: function(data) {
          console.log(data);
          up3Data = data.area;
        }
      });
    up2 = UIPickerView.createPickerView({
        dataSource: up3Data,
        id: 'areaPicker',
        constraintsId: 'wower2',
        kUP: {
          kUPCELLHEIGHT: 26,
          kUPFRICTION: 0.003
        },
        valueChange: function(data) {
          console.log(data);
          up3Data = data;
        }
      });
    
    animaed = CAAnimation.createAnimation({
      id: 'region-picker'
    });
    animaed.start();
  });

  pickerClose.addEventListener('click', function() {
    animaed.finish();
  });

  pickerOpen.addEventListener('click', function() {
    animaed.start();
  });
		}
  })
  </script>
</body>

</html>
